<template>
  <base-layout>
    <template #searchPanel>
      <el-row>
        <el-col :span="6">
          <div class="lineHeight">项目类型</div>
          <ul class="listPanle">
            <li
              @click="projectDictCheck(item.value)"
              :style="item.isCheck ? ' color: #409eff' : ''"
              v-for="(item, index) in dict['汽车项目类型']"
              :key="index"
              :value="item.value"
            >
              {{ item.text }}
            </li>
          </ul>
        </el-col>
        <el-col :span="18">
          <el-col
            :span="24"
            class="seachpanle"
          >
            <div class="title lineHeight">项目</div>
            <div class="serach">
              <el-input
                v-model="form.projectName"
                clearable
                placeholder="项目名称"
              />
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="query"
              >搜索</el-button>
            </div>
          </el-col>
          <el-col :span="24">
            <el-checkbox-group
              v-if="
                dataList[`projectDictId${form.projectDictId}`] &&
                  dataList[`projectDictId${form.projectDictId}`].length > 0
              "
              v-model="checkboxGroup"
              :max="max"
            >
              <el-row
                v-for="item in dataList[`projectDictId${form.projectDictId}`]"
                :key="item.id"
              >
                <el-checkbox
                  border
                  :value="item.isCheck === 1"
                  :label="item.id"
                  class="checkbos"
                >
                  <div>
                    <el-col :span="6">{{ item.projectDictValue }}</el-col>
                    <el-col :span="6">{{ item.projectName }}</el-col>
                    <el-col :span="6">{{ item.workHours + '小时' }}</el-col>
                    <el-col
                      :span="6"
                      class="mount"
                    >{{
                      '￥' + item.amount
                    }}</el-col>
                  </div>
                </el-checkbox>
              </el-row>
            </el-checkbox-group>
            <div
              v-else
              style="
                text-align: center;
                padding: 40px;
                font-size: 14px;
                color: #606266;
              "
            >
              暂无数据
            </div>
          </el-col>
        </el-col>
      </el-row>
    </template>
    <template #contentPanel>
      <el-row>
        <el-col :span="22">已选项目</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <data-table
          :value="tableData"
          :total-count="tableData.length"
          :has-action="true"
          :table-column-attributes="tableColumnAttributes"
          :width="160"
          :localPage="true"
        >
          <template #action="{ row }">
            <i
              class="el-icon-delete"
              title="删除"
              style="color: red; margin-left: 20px; cursor: pointer"
              @click="deleteById(row)"
            ></i>
          </template>
        </data-table>
      </el-row>
      <el-row>
        <el-col
          :span="24"
          align="right"
          justify="center"
        >
          <el-button
            type="success"
            @click="select"
          >选择项目</el-button>
        </el-col>
      </el-row>
    </template>
  </base-layout>
</template>

<script>
import BaseLayout from '@/views/layout/Base'
import DataTable from '@/components/DataTable'
import { getDict, getStoreId } from '@/utils'
import { dataList as queryData } from '@/api/after-sale/systemManage/project'
import data from '@/views/svg-icons/generateIconsView'
export default {
  components: {
    'base-layout': BaseLayout,
    DataTable
  },
  props: {
    storageId: {
      type: Number
    },
    // 可被勾选的 checkbox 的最大数量
    max: {
      type: Number
    }
  },
  data () {
    return {
      form: {
        projectDictId: '', //项目类型id
        storeId: '', //门店
        projectName: '' //项目名称
      },
      tableColumnAttributes: [
        {
          name: '项目名',
          value: 'projectName',
          type: 'text'
        },
        {
          name: '项目介绍',
          value: 'remark',
          type: 'text'
        },
        {
          name: '项目工时',
          value: 'workHours',
          type: 'render',
          render: (row, value) => {
            return `${value}小时`
          }
        },
        {
          name: '项目类型',
          value: 'projectDictValue',
          type: 'text'
        },
        {
          name: '工时费',
          value: 'amount',
          type: 'render',
          render: (row, value) => {
            return `￥${value}`
          }
        }
        // commission 项目提成点
      ],
      dict: [], //字典
      checkDictValue: {}, //选中字典
      dataList: {},
      checkboxGroup: [],
      tableData: [],
      totalCount: 0
    }
  },
  watch: {
    checkboxGroup: function (value) {
      if (value) {
        this.addTable(value)
      }
    }
  },
  methods: {
    //项目类型选择 触发事件  更新选中的项目类型码值 以及搜索条件
    projectDictCheck (value) {
      let arry = Object.assign([], this.dict['汽车项目类型'])
      arry.forEach(item => {
        if (value == item.value) {
          this.checkDictValue = item
          this.form.projectName = ''
          this.form.projectDictId = value
          item.isCheck = true
          this.query()
        } else {
          item.isCheck = false
        }
      })
      this.dict['汽车项目类型'] = arry
    },
    // 删除
    deleteById (row) {
      this.checkboxGroup = this.checkboxGroup.map(e => {
        if (e != row.id) {
          return e
        }
      })
    },
    async query () {
      this.form.projectDictId = this.checkDictValue.value
      //   this.form.storeId =this.storageId?this.storageId: getStoreId() TODO 暂时注释  当前携带门店无法查询
      let {
        data: { content }
      } = await queryData(this.form, 100, 1)
      if (this.dataList[`projectDictId${this.form.projectDictId}`]) {
        this.$set(
          this.dataList,
          `projectDictId${this.form.projectDictId}`,
          this.checkData(content)
        )
      } else {
        this.$set(
          this.dataList,
          `projectDictId${this.form.projectDictId}`,
          content
        )
      }
    },
    //遍历元数据结构 赋值勾选
    checkData (content) {
      let _projectDictId = this.form.projectDictId
      this.dataList[`projectDictId${_projectDictId}`].forEach(item => {
        if ('isCheck' in item && item.isCheck) {
          content.forEach(contentItem => {
            if (contentItem.id == item.id) {
              contentItem.isCheck = true
            }
          })
        }
      })
      return content
    },
    // 选择配件
    select () {
      this.$emit('getList', this.tableData)
    },
    // 表格数据添加
    addTable (value) {
      this.tableData = []
      let data = []
      value.forEach(e => {
        Object.keys(this.dataList).forEach(key => {
          if (this.dataList[`${key}`].length > 0) {
            this.dataList[`${key}`].forEach(g => {
              if (e === g.id) {
                data.push(g)
              }
            })
          }
        })
      })
      this.tableData = data
    }
  },
  created () {
    this.dict = getDict(['汽车项目类型'], this.storageId)
  }
}
</script>

<style lang="scss" scoped>
.seachpanle {
  display: flex;

  .title {
    flex: 1;
  }

  .serach {
    width: 300px;
    display: flex;

    .el-button {
      margin-left: 10px;
    }
  }
}

.lineHeight {
  line-height: 36px;
}

.textAlign {
  text-align: center;
}

.listPanle {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-right: 10px;
  border-right: 1px solid #bbbbbb;
  li {
    // border-top: 1px solid #bbbbbb;
    // border-bottom: 1px solid #bbbbbb;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 16px;
    color: #606266;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  li:hover {
    cursor: pointer;
    background-color: #f5f7fa;
  }
}

.active {
  color: #409eff;
}

.mount {
  color: #f40;
}

/deep/ .checkbos {
  width: 100%;
  margin-top: 5px;

  /deep/.el-checkbox__label {
    width: 100%;
  }

  .el-checkbox__inner {
    margin-bottom: 7px;
  }
}
/deep/ .el-checkbox-group {
  height: 350px;
  overflow-y: scroll;
}
</style>
